import React from 'react';

// 引入页头组件
import Pageheader from '@/components/Pageheader';
import { Button, Table, Tag, Space, message } from 'antd';
import { useEffect, useState, useRef } from 'react';
// 引入模态框组件
import Mymodal from '@/components/Mymodal';
// 引入用户相关接口
import { getuserlist, deluserFn } from '@/api/user';
// 引入分页组件
import Mypagniation from '@/components/Mypagniation';
const Index = () => {
  // 这是定义列
  const columns = [
    {
      title: '序号',
      dataIndex: 'id', // 表示该列在数据中对应哪一个字段
      key: 'id', // 唯一索引
      align: 'center',
      render: (text) => <a>{text}</a>,
    },
    {
      title: '用户名',
      dataIndex: 'username',
      key: 'id',
    },
    {
      title: '手机号',
      dataIndex: 'mobile',
      key: 'id',
    },
    {
      title: '邮箱',
      dataIndex: 'email',
      key: 'id',
    },
    {
      title: '性别',
      key: 'id',
      dataIndex: 'gender',
      render: (tags) => {
        // tags 就是该列数据对象中对应gender的value值
        let color = tags;
        let sex = '男'
        switch (color) {
          case '1':
            color = 'error'
            sex = '男'
            break;
          case '2':
            color = 'success'
            sex = '女'
            break;
          default:
            color = 'warning'
            sex = '保密'
            break;
        }

        return <Tag color={color}>
          {sex}
        </Tag>
      }
    },
    {
      title: '状态',
      key: 'id',
      dataIndex: 'status',
      render: (tags) => {
        // tags 就是该列数据对象中对应gender的value值

        return <Tag color={tags == 1 ? 'success' : 'error'}>
          {tags == 1 ? '正常' : '禁用'}
        </Tag>
      }
    },
    {
      title: '操作',
      key: 'id',
      render: (_, record) => (
        <Space size="middle">
          <Button type='primary' onClick={() => editUserFn(record)}>编辑</Button>
          <Button type='primary' danger onClick={() => deleteUserHandler(record)}>删除</Button>
        </Space>
      ),
    },
  ];
  // 定义用户列表数据请求
  const [page, setPage] = useState(1);
  const [userlist, setuserlist] = useState([])
  // 设置总的数据条数
  const [total, setTotal] = useState(0)
  useEffect(() => {
    getuserlistHandler({ page })
  }, [])

  const getuserlistHandler = (params) => {
    getuserlist(params).then(res => {
      // console.log('res', res);
      if (res.data.errNo == 0) {
        setuserlist(res.data.paginate.data)
        setTotal(res.data.paginate.total)
      }
    })
  }

  // 添加功能
  const ref1 = useRef()
  const addUserFn = () => {
    // 显示模态框
    ref1.current.showModal()
    ref1.current.setTitle('添加')
    // console.log('ref1', ref1)
  }
  // 编辑用户
  const editUserFn = (record) => {
    // 显示模态框
    ref1.current.showModal()
    ref1.current.setTitle('编辑')
    // console.log(record)
    ref1.current.setCurrentUser(record)
  }
  // 删除用户
  const deleteUserHandler = (record) => {
    // console.log('删除用户', record)
    deluserFn(record).then(res => {
      // console.log(res)
      if (res.data.errNo === 0) {
        message.success('删除成功', 1, () => {
          // 重新请求用户列表
          getuserlistHandler({ page })
        })
      } else {
        message.error(res.data.errText, 1)
      }
    })
  }

  return (
    <div>
      {/* 页头标签 */}
      <Pageheader title='用户列表'>
        <Button type='primary' onClick={addUserFn}>添加</Button>
      </Pageheader>
      {/* 展示表格数据 */}
      <Table
        columns={columns}
        pagination={false}
        dataSource={userlist}
        rowKey={(record) => record.id}
      />
      {/* 模态框组件 */}
      <Mymodal ref={ref1} getuserlistHandler={getuserlistHandler} page={page}></Mymodal>
      {/* 分页组件 */}
      <Mypagniation getlistHandler={getuserlistHandler} page={page} total={total} setPage={setPage}></Mypagniation>
    </div>
  );
}

export default Index;
